<!-- @刘洪材编写 -->
<!-- 2023年10月22日 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>刘洪材的窗口拖动</title>
  <style>
    /* 窗口样式 */
    .window {
      position: absolute;
      width: 300px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    /* 标题栏样式 */
    .window-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      padding: 0 10px;
      background-color: #f1f1f1;
      border-bottom: 1px solid #ccc;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      cursor: move;
    }

    /* 标题样式 */
    .window-title {
      font-size: 16px;
      font-weight: bold;
      margin: 0;
    }

    /* 关闭按钮样式 */
    .window-close {
      width: 20px;
      height: 20px;
      background-color: #f44336;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .window-close:hover {
      background-color: #d32f2f;
    }

    .window-content {
    height: calc(100% - 40px);
    justify-content: center;
    align-items: center;
    }

    .window-content p {
      text-align: center;
    }

    /* 内容区域样式 */
    .window-content {
      padding: 10px;
      height: calc(100% - 40px);
    }
  </style>
</head>
<body>
  <div class="window" id="myWindow">
    <div class="window-header" id="windowHeader">
      <h2 class="window-title">关于我们</h2>
      <div class="window-close">&#x2715;</div>
    </div>
    <div class="window-content">
      <p>&#36825;&#26159;&#19968;&#20010;&#31227;&#21160;&#31383;&#21475;&#30340;&#31034;&#20363;&#31243;&#24207;</p>
      <p>&#37319;&#29992;&#72;&#84;&#77;&#76;&#21644;&#74;&#97;&#118;&#97;&#83;&#99;&#114;&#105;&#112;&#116;&#23454;&#29616;</p> 
      <p>&#64;&#21016;&#27946;&#26448;&#30340;&#24320;&#28304;&#31243;&#24207;&#32;&#50;&#48;&#50;&#51;&#24180;&#49;&#48;&#26376;&#50;&#50;&#26085;</p>
    </div>
  </div>

  <script>
    // 获取窗口元素和标题栏元素
    var windowElement = document.getElementById("myWindow");
    var windowHeader = document.getElementById("windowHeader");

    // 定义变量来存储鼠标位置和窗口偏移量
    var mouseX = 0;
    var mouseY = 0;
    var windowLeft = 0;
    var windowTop = 0;
    var isDragging = false;

    // 鼠标按下事件处理函数
    function onMouseDown(event) {
      // 记录鼠标位置和窗口偏移量
      mouseX = event.clientX;
      mouseY = event.clientY;
      windowLeft = windowElement.offsetLeft;
      windowTop = windowElement.offsetTop;

      // 添加鼠标移动和释放事件监听器
      document.addEventListener("mousemove", onMouseMove);
      document.addEventListener("mouseup", onMouseUp);

      // 阻止事件冒泡和默认行为
      event.stopPropagation();
      event.preventDefault();

      // 设置拖动标志为 true
      isDragging = true;
    }

    // 鼠标移动事件处理函数
    function onMouseMove(event) {
      if (isDragging) {
        // 计算窗口新的位置
        var deltaX = event.clientX - mouseX;
        var deltaY = event.clientY - mouseY;
        var newWindowLeft = windowLeft + deltaX;
        var newWindowTop = windowTop + deltaY;

        // 获取窗口和屏幕的尺寸
        var windowWidth = windowElement.offsetWidth;
        var windowHeight = windowElement.offsetHeight;
        var screenWidth = window.innerWidth;
        var screenHeight = window.innerHeight;

        // 边界检查
        if (newWindowLeft < 0) {
          newWindowLeft = 0;
        }
        if (newWindowTop < 0) {
          newWindowTop = 0;
        }
        if (newWindowLeft + windowWidth > screenWidth) {
          newWindowLeft = screenWidth - windowWidth;
        }
        if (newWindowTop + windowHeight > screenHeight) {
          newWindowTop = screenHeight - windowHeight;
        }

        // 更新窗口位置
        windowElement.style.left = newWindowLeft + "px";
        windowElement.style.top = newWindowTop + "px";
      }
    }

    // 鼠标释放事件处理函数
    function onMouseUp(event) {
      // 移除鼠标移动和释放事件监听器
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);

      // 设置拖动标志为 false
      isDragging = false;
    }

    // 添加鼠标按下事件监听器
    windowHeader.addEventListener("mousedown", onMouseDown);
  </script>
</body>
</html>